$waves: (
    large:6px,
    normal:4px,
    mini:2,
);

@include theme {
    @each $key, $value in $waves {
        [plain-click-node-#{$key}] {
            &.plain-click-node, & .plain-click-node {
                position: relative;

                &:after {
                    display: none;

                    content: '';
                    position: absolute;
                    top: 1px;
                    left: 1px;
                    bottom: 1px;
                    right: 1px;
                    border-radius: inherit;
                    border: 0 solid $colorPrimary;
                    opacity: 0.6;
                    animation: fade-effect-#{$key} 2s cubic-bezier(0.08, 0.82, 0.17, 1), wave-effect-#{$key} 500ms cubic-bezier(0.08, 0.82, 0.17, 1);
                    animation-fill-mode: forwards;
                    pointer-events: none;
                }
            }

            &[plain-click-node-waving] {
                &.plain-click-node, & .plain-click-node {
                    &:after {
                        display: initial;
                    }
                }
            }
        }

        @keyframes wave-effect-#{$key} {
            100% {
                top: -$value;
                left: -$value;
                bottom: -$value;
                right: -$value;
                border-width: 6px;
            }
        }

        @keyframes fade-effect-#{$key} {
            100% {
                opacity: 0;
            }
        }
    }
}